<template>
  <div class="home" id="wrapper" @scroll="handleScroll" ref="home">
    <el-container>
      <el-aside :width="!isCollapse?'220px':'63px'" style="backgroundImage:linear-gradient(0deg,#fab266,#ef5f4e);">
        <div class="dropdown profile-element text-center aside-header" v-if="!isCollapse">
          <img alt="image" class="rounded-circle" src="./../assets/img/small.jpg" />
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">
            <span class="block m-t-xs" style="color:#fff;font-size: 20px">数据中台</span>
            <span class="block m-t-xs" style="color:#dfe4ed;">{{userName}}</span>
          </a>
        </div>
        
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" :collapse="isCollapse" :unique-opened="true" router background-color="transparent" text-color="#fff" active-text-color="#fff">
          <div v-for="(firstMenu,index) in menus" :key="index" v-if="firstMenu.children">
            <template v-if="firstMenu.children ">
              <el-submenu :index="firstMenu.path">
                <template slot="title">
                  <!-- <i class="el-icon-location"></i> -->
                  <span  >{{firstMenu.name}}</span>
                </template>
                
                <div v-for="(secondMenu,key) in firstMenu.children" :key="key" v-if="secondMenu.children">
                  <el-submenu :index="secondMenu.path+key">
                    <template slot="title">{{secondMenu.name}}</template>
                    <el-menu-item :index="thirdMenu.path" v-for="(thirdMenu,i) in secondMenu.children" :key="i">{{thirdMenu.name}}</el-menu-item>
                  </el-submenu>
                </div>
                <el-menu-item-group  v-if="firstMenu.children">
                  <div v-for="(secondMenu,key) in firstMenu.children" :key="key">
                    <el-menu-item :index="secondMenu.path" v-if="!secondMenu.children">
                      {{secondMenu.name}}
                    </el-menu-item>
                  </div>
                </el-menu-item-group>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="firstMenu.path">
                <!-- <i class="el-icon-setting"></i> -->
                <span slot="title">{{firstMenu.name}}</span>
              </el-menu-item>
            </template>

          </div>
        </el-menu>
      </el-aside>

      <el-main :style="{marginLeft: !isCollapse?'220px':'63px'}">
        <div id="page-wrapper" class="gray-bg">
          <eTopbar @close="close" />
          <router-view :scrollTop="scrollTop" ref="scrollTo" v-on:handle-after-login="handleAfterLogin"></router-view>
          <div class="footer">
            <div>bat (Shanghai) Technology Co.,Ltd &copy; 2019</div>
          </div>
        </div>

      </el-main>
    </el-container>

  </div>
</template>

<script>
import eTopbar from "./layout/topbar.vue";
import { Role } from "@/assets/js/api";
import { getCookie } from "@/assets/js/cookie";
import { getSessionStorage,setSessionStorage } from "@/assets/js/sessionStorage";
export default {
  name: "home",
  data() {
    return {
      userName: "下雨了",
      isCollapse: false,
      menus:[],
      scrollTop: 0,
      activeMenu: "",
    };
  },
  mounted() {
    let pathname = window.location.pathname;
    let user = getSessionStorage("userInfo",true)|| null;
    this.getRoleList();
    if (
      this.menus.some(menu => !menu.children && menu.path === pathname) ||
      this.menus.some(
        menu => menu.children && menu.children.some(c => c.path === pathname)
      )
    ) {
      this.activeMenu = pathname;
    } else {
      this.activeMenu = pathname.slice(0, pathname.lastIndexOf("/"));
    }
    
    if(user){
      this.userName = user.fullName;
    }
  },
  methods: {
    close() {
      this.isCollapse = !this.isCollapse;
    },
    handleScroll() {
      this.scrollTop = this.$refs.home.scrollTop;
    },
    handleAfterLogin(userName) {
      
    },
    getRoleList(){
      let _this = this
      if(this.menus.length == 0){
        if(!getCookie('roleId')){return this.$router.push({ path: "/login"})}
        let roleId = getCookie('roleId')
         let params={
          roleId:roleId
        }
        Role.getNowAuthCorrect(params).then(response=>{
          _this.menus=response.data;
        })
        console.log(this.menus)
      }
    }
  },
  components: { eTopbar }
};
</script>
<style scope="">
.el-aside {
  position: fixed;
  height: 100%;
}
.el-main {
  height: 100%;
  overflow-y: auto;
}
.aside-header {
  padding: 32px 0 47px;
  box-sizing: border-box;
}
.el-submenu.is-opened {
  background-color: #f27960;
  border-left: 3px solid #fff;
}
.el-menu-item.is-active {
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.25) !important;
}
.home .el-menu-item {
  /* background-color: rgba(255, 255, 255, 0.08) !important; */
  line-height: 35px !important;
  height: 35px !important;
}
.home .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}
.home .el-main {
  padding: 0;
  overflow-x: hidden;
}
.el-menu--popup {
  background-color: rgba(243, 129, 97) !important;
}
/* background-image: linear-gradient(0deg,#fab266,#ef5f4e); */
</style>
<style>
.home .el-submenu__title {
  line-height: 44px;
  height: 44px;
}
.home .el-submenu__title:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.home .el-submenu__title i {
  color: #fff;
}
.home .el-menu-item-group__title {
  padding: 0;
}
.home .el-menu {
  border-right: 0;
}
</style>
  

